<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放</title>
    <link rel="icon" th:href="@{/static/icons/icon.ico}" type="image/x-icon">
    <!-- 使用Font Awesome提供图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}"/>
    <script>
        function syncDouyinActions() {
            // 同步点赞状态
            const normalLikeBtn = document.querySelector('.dianzan');
            const douyinLikeBtn = document.querySelector('#douyinContainer .dianzan');
            if (normalLikeBtn && douyinLikeBtn) {
                douyinLikeBtn.className = normalLikeBtn.className;
                douyinLikeBtn.querySelector('.dianzanvalue').textContent = normalLikeBtn.querySelector('.dianzanvalue').textContent;
                const normalPpNum = document.getElementById('ppNum');
                const douyinPpNum = document.getElementById('douyinPpNum');
                if (normalPpNum && douyinPpNum) {
                    douyinPpNum.textContent = normalPpNum.textContent;
                }
            }
            // 收藏状态
            const normalCollectBtn = document.getElementById('c_button');
            const douyinCollectBtn = document.getElementById('douyinCButton');
            if (normalCollectBtn && douyinCollectBtn) {
                douyinCollectBtn.className = normalCollectBtn.className;
                douyinCollectBtn.querySelector('.c_value').textContent = normalCollectBtn.querySelector('.c_value').textContent;
                douyinCollectBtn.querySelector('.c_class').innerHTML = normalCollectBtn.querySelector('.c_class').innerHTML;
            }
            // 关注状态
            const normalFocusBtn = document.getElementById('focuson');
            const douyinFocusBtn = document.getElementById('douyinFocusBtn');
            if (normalFocusBtn && douyinFocusBtn) {
                douyinFocusBtn.className = normalFocusBtn.className;
                douyinFocusBtn.querySelector('.focusvalue').textContent = normalFocusBtn.querySelector('.focusvalue').textContent;
                douyinFocusBtn.querySelector('.focusClass').innerHTML = normalFocusBtn.querySelector('.focusClass').innerHTML;
            }
            // 弹幕状态
            const normalBarrageBtn = document.getElementById('barrage_on_off');
            const douyinBarrageBtn = document.getElementById('douyinBarrageBtn');
            if (normalBarrageBtn && douyinBarrageBtn) {
                douyinBarrageBtn.className = normalBarrageBtn.className;
                douyinBarrageBtn.querySelector('.barrage_text').textContent = normalBarrageBtn.querySelector('.barrage_text').textContent;
                douyinBarrageBtn.querySelector('.barrage_icon').innerHTML = normalBarrageBtn.querySelector('.barrage_icon').innerHTML;
            }
            // 重新绑定抖音模式按钮事件
            bindDouyinActions();
        }
        function bindDouyinActions() {
            // 先解绑，防止重复
            $('#douyinContainer .dianzan').off('click').on('click', function(e) {
                e.preventDefault();
                $('.dianzan').click();
            });
            $('#douyinCButton').off('click').on('click', function(e) {
                e.preventDefault();
                $('#c_button').click();
            });
            $('#douyinFocusBtn').off('click').on('click', function(e) {
                e.preventDefault();
                $('#focuson').click();
            });
            $('#douyinBarrageBtn').off('click').on('click', function(e) {
                e.preventDefault();
                $('#barrage_on_off').click();
            });
        }
    </script>
    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/js/xcConfirm.js}" type="text/javascript"></script>

    <style>
        :root {
            --b-pink: #fb7299;
            --b-blue: #00a1d6;
            --b-text-primary: #222;
            --b-text-secondary: #666;
            --b-border-color: #e0e0e0;
            --b-bg-light: #f8f9fa;
            --b-bg-card: #fff;
            --b-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
            --b-radius: 14px;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: linear-gradient(120deg, #f8f9fa 0%, #eaf6ff 100%); color: var(--b-text-primary); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-size: 15px; }
        .page-container { display: flex; max-width: 1600px; margin: 32px auto; padding: 0 24px; gap: 32px; }
        .main-content { flex: 1; min-width: 0; }
        .sidebar { width: 340px; flex-shrink: 0; }
        .video-title { font-size: 24px; font-weight: 700; margin-bottom: 18px; color: var(--b-text-primary); letter-spacing: 1px; }
        .video-player-container { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: var(--b-radius); overflow: hidden; box-shadow: var(--b-shadow); margin-bottom: 24px; }
        .video-player-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--b-radius); }
        .custom-video-controls { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 16px; color: white; opacity: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); transition: opacity 0.3s; z-index: 10; border-radius: 0 0 var(--b-radius) var(--b-radius); }
        .video-player-container.controls-visible .custom-video-controls, .video-player-container.paused .custom-video-controls { opacity: 1; }
        .progress-container { padding: 8px 0; cursor: pointer; }
        .progress-bar-wrapper { position: relative; width: 100%; height: 6px; background: rgba(255,255,255,0.18); border-radius: 3px; transition: height 0.2s; }
        .progress-container:hover .progress-bar-wrapper { height: 10px; }
        .progress-bar-buffered, .progress-bar-played { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; }
        .progress-bar-buffered { background: rgba(255,255,255,0.4); }
        .progress-bar-played { background: linear-gradient(90deg, var(--b-pink), var(--b-blue)); }
        .progress-bar-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 0 8px rgba(0,0,0,0.12); opacity: 0; transition: opacity 0.2s; border: 2px solid var(--b-pink); }
        .progress-container:hover .progress-bar-thumb { opacity: 1; }
        .controls-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 14px 0; }
        .controls-left, .controls-right { display: flex; align-items: center; }
        .b-button { background: none; border: none; color: white; padding: 10px; font-size: 22px; cursor: pointer; transition: transform 0.1s, background 0.2s; border-radius: 6px; line-height: 1; }
        .b-button:hover { background: rgba(255,255,255,0.18); transform: scale(1.13); }
        #timeDisplay { font-size: 15px; margin-left: 18px; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); user-select: none; }
        .volume-control { position: relative; display: flex; align-items: center; margin-left: 18px; }
        .volume-slider-container { width: 0; height: 6px; background: rgba(255,255,255,0.18); border-radius: 3px; position: relative; cursor: pointer; overflow: hidden; transition: width 0.3s; margin-left: 7px; }
        .volume-control:hover .volume-slider-container { width: 90px; }
        .volume-fill { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, var(--b-pink), var(--b-blue)); border-radius: 3px; }
        .volume-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background: #fff; border-radius: 50%; }
        .b-button-text { font-size: 15px; padding: 10px 12px; }
        .pop-menu { display: none; position: absolute; bottom: 120%; right: 0; background: rgba(33,33,33,0.97); backdrop-filter: blur(5px); border-radius: 8px; padding: 7px 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.13); min-width: 110px; }
        .speed-control { position: relative; }
        .pop-menu-item { color: #eee; padding: 12px 24px; cursor: pointer; font-size: 15px; transition: background 0.2s; text-align: center; border-radius: 6px; }
        .pop-menu-item:hover { background: rgba(255,255,255,0.13); }
        .pop-menu-item.active { color: var(--b-pink); background: rgba(251,114,153,0.08); }
        #fullscreenBtn.is-fullscreen .fa-expand:before { content: "\f066"; }
        .video-info-bar { margin-top: 22px; }
        .uploader-info { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--b-border-color); }
        .uploader-info .left { display: flex; align-items: center; gap: 16px; }
        .uploader-info .avatar { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--b-blue); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        .uploader-info .name { font-size: 18px; font-weight: 700; color: var(--b-text-primary); letter-spacing: 1px; transition: color 0.2s; }
        .uploader-info .name:hover { color: var(--b-pink); }
        .uploader-info .fans { font-size: 13px; color: var(--b-text-secondary); }
        .uploader-info .follow-btn { background: linear-gradient(90deg, var(--b-pink), var(--b-blue)); color: white; border: none; border-radius: 20px; padding: 9px 22px; font-size: 15px; cursor: pointer; font-weight: 600; box-shadow: 0 2px 8px rgba(251,114,153,0.08); transition: opacity 0.2s, box-shadow 0.2s; }
        .uploader-info .follow-btn:hover { opacity: 0.92; box-shadow: 0 4px 16px rgba(0,161,214,0.13); }
        .video-meta { display: flex; align-items: center; gap: 24px; color: var(--b-text-secondary); margin-top: 14px; font-size: 15px; }
        .action-bar { display: flex; gap: 24px; margin-top: 20px; }
        .action-button { display: flex; align-items: center; gap: 7px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 22px; padding: 8px 22px; color: var(--b-text-primary); cursor: pointer; font-size: 15px; font-weight: 500; transition: background 0.2s, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
        .action-button:hover { background: linear-gradient(90deg, #fbeff3 0%, #eaf6ff 100%); box-shadow: 0 4px 16px rgba(251,114,153,0.08); }
        .action-button .fas { font-size: 20px; }
        .barrage-container { margin-top: 20px; background: #f8f9fa; border-radius: var(--b-radius); padding: 18px; border: 1px solid #e9ecef; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
        .barrage-input { display: flex; gap: 12px; align-items: center; }
        .barrage-input input { flex: 1; background: #fff; border: 1px solid #ced4da; border-radius: 8px; padding: 10px 16px; color: var(--b-text-primary); font-size: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
        .barrage-input button { background: linear-gradient(90deg, var(--b-pink), var(--b-blue)); color: white; border: none; border-radius: 8px; padding: 10px 24px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(251,114,153,0.08); transition: opacity 0.2s; }
        .barrage-input button:hover { opacity: 0.92; }
        .barrage { width: 100%; height: 300px; position: absolute; pointer-events: none; top: 0; left: 0; overflow: hidden; }
        .barrage .show div { color: white; position: absolute; right: 0; font-size: 22px; text-shadow: 1px 1px 2px black; white-space: nowrap; }
        .comments-section { margin-top: 32px; background: var(--b-bg-card); border-radius: var(--b-radius); box-shadow: var(--b-shadow); padding: 24px 24px 12px 24px; border: 1px solid #e9ecef; }
        .comments-header { font-size: 20px; font-weight: 700; margin-bottom: 18px; color: var(--b-text-primary); }
        .comment-item { display: flex; gap: 16px; margin-bottom: 24px; background: #f9f9fb; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); padding: 16px; }
        .comment-item .avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--b-blue); }
        .comment-item .content .username { font-weight: 700; margin-bottom: 6px; color: var(--b-text-primary); font-size: 16px; }
        .comment-item .content .text { line-height: 1.7; color: var(--b-text-secondary); font-size: 15px; }
        .comment-meta { margin-top: 10px; }
        .comment-meta a { margin-right: 10px; color: var(--b-blue); font-size: 14px; transition: color 0.2s; }
        .comment-meta a:hover { color: var(--b-pink); }
        .reply-input-area { margin-top: 10px; }
        .reply-input { border-radius: 8px; border: 1px solid #ced4da; padding: 6px 12px; font-size: 14px; }
        .btn-primary, .btn-sm.btn-primary { background: linear-gradient(90deg, var(--b-pink), var(--b-blue)); border: none; border-radius: 8px; font-weight: 600; }
        .btn-primary:hover { opacity: 0.92; }
        .sidebar-card { background: var(--b-bg-card); border-radius: var(--b-radius); padding: 20px; margin-bottom: 24px; border: 1px solid #e9ecef; box-shadow: var(--b-shadow); }
        .related-videos-list .related-video-item { display: flex; gap: 14px; margin-bottom: 16px; cursor: pointer; background: #f9f9fb; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); transition: transform 0.15s, box-shadow 0.15s; }
        .related-videos-list .related-video-item:hover { transform: scale(1.03); box-shadow: 0 4px 16px rgba(0,161,214,0.10); }
        .related-videos-list .thumbnail { width: 120px; height: 70px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
        .related-videos-list .details .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; margin-bottom: 4px; font-weight: 600; color: var(--b-text-primary); }
        .related-videos-list .details .views { font-size: 13px; color: var(--b-text-secondary); }
        @media (max-width: 1200px) { .page-container { flex-direction: column; } .sidebar { width: 100%; } }
        @media (max-width: 900px) { .page-container { flex-direction: column; gap: 0; padding: 0 4px; } .sidebar { width: 100%; margin-top: 24px; } .main-content { padding: 0; } }
        @media (max-width: 600px) { .video-title { font-size: 18px; } .sidebar-card, .comments-section { padding: 10px; } .action-bar { gap: 10px; } }
        .my-toast {
            min-width: 160px;
            margin-top: 12px;
            padding: 14px 28px;
            border-radius: 8px;
            color: #fff;
            font-size: 15px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.13);
            background: #333;
            opacity: 0.97;
            animation: toastIn 0.3s;
            pointer-events: auto;
        }
        .my-toast-success { background: linear-gradient(90deg, #00c176, #00a1d6); }
        .my-toast-error { background: linear-gradient(90deg, #fb7299, #ff4d4f); }
        @keyframes toastIn { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 0.97; } }
        /* 新增删除确认弹窗样式 */
        .my-modal-mask {
            position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.18); z-index: 10000; display: flex; align-items: center; justify-content: center;
        }
        .my-modal {
            background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.13); padding: 32px 36px 24px 36px; min-width: 320px; text-align: center; position: relative;
        }
        .my-modal-title { font-size: 18px; font-weight: 700; margin-bottom: 18px; color: #222; }
        .my-modal-btns { margin-top: 18px; display: flex; justify-content: center; gap: 32px; }
        .my-modal-btn { padding: 8px 32px; border-radius: 8px; border: none; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
        .my-modal-btn-confirm { background: linear-gradient(90deg, #fb7299, #ff4d4f); color: #fff; }
        .my-modal-btn-cancel { background: #f5f5f5; color: #333; border: 1px solid #e0e0e0; }
        .my-modal-btn-confirm:hover { opacity: 0.92; }
        .my-modal-btn-cancel:hover { background: #e0e0e0; }

        /* 抖音风格布局样式 */
        .layout-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background: rgba(0,0,0,0.8);
            border-radius: 25px;
            padding: 8px;
            backdrop-filter: blur(10px);
        }
        .layout-btn {
            background: none;
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            margin: 0 4px;
        }
        .layout-btn.active {
            background: var(--b-pink);
            box-shadow: 0 2px 8px rgba(251,114,153,0.3);
        }
        .layout-btn:hover {
            background: rgba(255,255,255,0.1);
        }

        /* 抖音风格容器 */
        .douyin-container {
            display: none;
            height: 100vh;
            overflow-y: auto;
            background: #000;
            scroll-snap-type: y mandatory;
        }
        .douyin-container.active {
            display: block;
        }

        .douyin-video-item {
            height: 100vh;
            scroll-snap-align: start;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
        }

        .douyin-video-player {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .douyin-video-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            padding: 60px 20px 20px;
            color: white;
        }

        .douyin-video-info {
            margin-bottom: 20px;
        }

        .douyin-video-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .douyin-video-desc {
            font-size: 14px;
            opacity: 0.9;
            line-height: 1.5;
        }

        .douyin-actions {
            position: absolute;
            right: 20px;
            bottom: 120px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
        }

        .douyin-action-btn {
            background: none;
            border: none;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .douyin-action-btn:hover {
            transform: scale(1.1);
        }

        .douyin-action-btn i {
            font-size: 28px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        .douyin-action-btn span {
            font-size: 12px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        .douyin-user-info {
            position: absolute;
            left: 20px;
            bottom: 120px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .douyin-user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid white;
        }

        .douyin-user-name {
            color: white;
            font-weight: 600;
            font-size: 16px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        .douyin-follow-btn {
            background: var(--b-pink);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 6px 16px;
            font-size: 12px;
            cursor: pointer;
            margin-top: 5px;
        }

        /* 隐藏原有布局 */
        .page-container.douyin-mode {
            display: none;
        }
        /* 新增：警告弹窗样式，z-index更高，居中覆盖在点评弹窗上方 */
        .my-modal-mask.warning-modal-mask {
            z-index: 12000;
            background: rgba(0,0,0,0.13); /* 更轻的遮罩，保留下方弹窗阴影 */
        }
        .my-modal.warning-modal {
            box-shadow: 0 8px 32px rgba(251,114,153,0.18), 0 2px 8px rgba(0,0,0,0.13);
            border: 2px solid #fb7299;
            min-width: 340px;
        }
        /* 确保toast浮窗容器在右上角 */
        #toast-container {
            position: fixed;
            top: 32px;
            right: 32px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            pointer-events: none;
        }
        /* 强制右上角toast浮窗样式 */
        #toast-container {
            position: fixed !important;
            top: 32px !important;
            right: 32px !important;
            left: auto !important;
            bottom: auto !important;
            z-index: 9999 !important;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            pointer-events: none;
            width: auto !important;
            height: auto !important;
        }
    </style>
</head>
<body>
<div id="toast-container"></div>

<!-- 布局切换器 -->
<div class="layout-switcher">
    <button class="layout-btn active" data-layout="normal">
        <i class="fas fa-th-large"></i> 经典
    </button>
    <button class="layout-btn" data-layout="douyin">
        <i class="fas fa-mobile-alt"></i> 垂直
    </button>
</div>

<!-- 隐藏的input，用于JS获取关键ID -->
<input type="hidden" id="videoId" th:value="${session.curVideo.videoId}">
<input type="hidden" id="focusedid" th:value="${session.curVideo.user.userId}">
<input type="hidden" id="userId" th:value="${session.user.userId}">
<div id="modal-container"></div>

<!-- 抖音风格容器 -->
<div class="douyin-container" id="douyinContainer">
    <div class="douyin-video-item" data-video-id="current">
        <video class="douyin-video-player" id="douyinVideoPlayer" th:src="${session.curVideo.videoUrl}" th:poster="${session.curVideo.thunmbnailUrl}" loop muted autoplay></video>
        <!-- 暂停标志 -->
        <div class="douyin-pause-icon" style="display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:20; pointer-events:none;">
            <i class="fas fa-pause-circle" style="font-size:80px; color:rgba(255,255,255,0.7);"></i>
        </div>
        <div class="douyin-video-overlay">
            <div class="douyin-video-info">
                <div class="douyin-video-title" th:text="${session.curVideo.videoTitle}">视频标题</div>
                <div class="douyin-video-desc" th:text="${session.curVideo.videoInfo}">视频描述</div>
            </div>
        </div>
        <div class="douyin-actions">
            <button class="douyin-action-btn dianzan" title="点赞">
                <i class="fas fa-heart"></i>
                <span class="dianzanvalue">点赞</span>
                <span id="douyinPpNum1" th:text="${session.curVideo.ppNum}">0</span>
            </button>
            <button class="douyin-action-btn" data-toggle="modal" data-target="#commentModal" title="点评">
                <i class="fas fa-star"></i>
                <span>点评</span>
            </button>
            <button class="douyin-action-btn" id="douyinCButton1" title="收藏">
                <span class="c_class"><i class="far fa-bookmark"></i></span>
                <span class="c_value">收藏</span>
            </button>
            <button class="douyin-action-btn" id="douyinBarrageBtn1" title="弹幕">
                <span class="barrage_icon"><i class="fas fa-comment-dots"></i></span>
                <span class="barrage_text">弹幕</span>
            </button>
            <button class="douyin-action-btn" data-toggle="modal" data-target="#privatemsg" title="私信">
                <i class="fas fa-envelope"></i>
                <span>私信</span>
            </button>
        </div>

        <div class="douyin-user-info">
            <img th:src="${session.curVideo.user.iconUrl}" alt="UP主头像" class="douyin-user-avatar">
            <div>
                <div class="douyin-user-name" th:text="${session.curVideo.user.userName}">UP主名称</div>
                <button class="douyin-follow-btn" id="douyinFocusBtn">
                    <span class="focusClass"><i class="fas fa-plus"></i></span>
                    <span class="focusvalue">关注</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 推荐视频占位符，用于模拟刷视频的感觉 -->
    <div class="douyin-video-item" data-video-id="1">
        <video class="douyin-video-player" src="/static/video/bwbj.mp4" poster="/static/vimages/video1.png" loop muted autoplay></video>
        <!-- 暂停标志 -->
        <div class="douyin-pause-icon" style="display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:20; pointer-events:none;">
            <i class="fas fa-pause-circle" style="font-size:80px; color:rgba(255,255,255,0.7);"></i>
        </div>
        <div class="douyin-video-overlay">
            <div class="douyin-video-info">
                <div class="douyin-video-title">霸王别姬</div>
                <div class="douyin-video-desc">段小楼（张丰毅）与程蝶衣（张国荣）是一对打小一起长大的师兄弟...</div>
            </div>
        </div>
        <div class="douyin-actions">
            <button class="douyin-action-btn dianzan" title="点赞">
                <i class="fas fa-heart"></i>
                <span class="dianzanvalue">点赞</span>
                <span id="douyinPpNum2" th:text="${session.curVideo.ppNum}">0</span>
            </button>
            <button class="douyin-action-btn" data-toggle="modal" data-target="#commentModal" title="点评">
                <i class="fas fa-star"></i>
                <span>点评</span>
            </button>
            <button class="douyin-action-btn" id="douyinCButton2" title="收藏">
                <span class="c_class"><i class="far fa-bookmark"></i></span>
                <span class="c_value">收藏</span>
            </button>
            <button class="douyin-action-btn" id="douyinBarrageBtn2" title="弹幕">
                <span class="barrage_icon"><i class="fas fa-comment-dots"></i></span>
                <span class="barrage_text">弹幕</span>
            </button>
            <button class="douyin-action-btn" data-toggle="modal" data-target="#privatemsg" title="私信">
                <i class="fas fa-envelope"></i>
                <span>私信</span>
            </button>
        </div>
        <div class="douyin-user-info">
            <img src="/static/uimages/icon10.jpg" alt="UP主头像" class="douyin-user-avatar">
            <div>
                <div class="douyin-user-name">jianqian</div>
                <button class="douyin-follow-btn">
                    <i class="fas fa-plus"></i>
                    <span>关注</span>
                </button>
            </div>
        </div>
    </div>

    <div class="douyin-video-item" data-video-id="4">
        <video class="douyin-video-player" src="/static/video/20250714103822.mp4" poster="/static/vimages/video4.png" loop muted></video>
        <!-- 暂停标志 -->
        <div class="douyin-pause-icon" style="display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:20; pointer-events:none;">
            <i class="fas fa-pause-circle" style="font-size:80px; color:rgba(255,255,255,0.7);"></i>
        </div>
        <div class="douyin-video-overlay">
            <div class="douyin-video-info">
                <div class="douyin-video-title">dance</div>
                <div class="douyin-video-desc">  </div>
            </div>
        </div>
        <div class="douyin-actions">
            <button class="douyin-action-btn dianzan" title="点赞">
                <i class="fas fa-heart"></i>
                <span class="dianzanvalue">点赞</span>
                <span id="douyinPpNum3" th:text="${session.curVideo.ppNum}">0</span>
            </button>
            <button class="douyin-action-btn" data-toggle="modal" data-target="#commentModal" title="点评">
                <i class="fas fa-star"></i>
                <span>点评</span>
            </button>
            <button class="douyin-action-btn" id="douyinCButton3" title="收藏">
                <span class="c_class"><i class="far fa-bookmark"></i></span>
                <span class="c_value">收藏</span>
            </button>
            <button class="douyin-action-btn" id="douyinBarrageBtn3" title="弹幕">
                <span class="barrage_icon"><i class="fas fa-comment-dots"></i></span>
                <span class="barrage_text">弹幕</span>
            </button>
            <button class="douyin-action-btn" data-toggle="modal" data-target="#privatemsg" title="私信">
                <i class="fas fa-envelope"></i>
                <span>私信</span>
            </button>
        </div>
        <div class="douyin-user-info">
            <img src="/static/uimages/ikun.png" alt="UP主头像" class="douyin-user-avatar">
            <div>
                <div class="douyin-user-name">粉粉</div>
                <button class="douyin-follow-btn">
                    <i class="fas fa-plus"></i>
                    <span>关注</span>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="page-container" id="normalContainer">
    <!-- 主要内容 -->
    <main class="main-content">
        <h1 class="video-title" th:text="${session.curVideo.videoTitle}">视频标题</h1>

        <!-- 视频播放器 -->
        <div class="video-player-container">
            <video id="videoPlayer" th:src="${session.curVideo.videoUrl}" th:poster="${session.curVideo.thunmbnailUrl}" muted></video>

            <!-- 暂停标志 -->
            <div class="main-pause-icon" style="display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:20; pointer-events:none;">
                <i class="fas fa-pause-circle" style="font-size:90px; color:rgba(255,255,255,0.7);"></i>
            </div>

            <!-- 弹幕层，现在是视频播放器的直接子元素 -->
            <div class="barrage">
                <div class="show"></div>
            </div>

            <div class="custom-video-controls">
                <div class="progress-container">
                    <div class="progress-bar-wrapper">
                        <div class="progress-bar-buffered"></div>
                        <div class="progress-bar-played"></div>
                        <div class="progress-bar-thumb"></div>
                    </div>
                </div>
                <div class="controls-row">
                    <div class="controls-left">
                        <button id="playPauseBtn" class="b-button" title="播放/暂停"><i class="fas fa-play"></i></button>
                        <span id="timeDisplay">00:00 / 00:00</span>
                    </div>
                    <div class="controls-right">
                        <div class="speed-control">
                            <button id="speedBtn" class="b-button b-button-text" title="倍速">倍速</button>
                            <div id="speedMenu" class="pop-menu">
                                <div class="pop-menu-item" data-speed="2.0">2.0x</div>
                                <div class="pop-menu-item" data-speed="1.5">1.5x</div>
                                <div class="pop-menu-item" data-speed="1.25">1.25x</div>
                                <div class="pop-menu-item active" data-speed="1.0">1.0x</div>
                                <div class="pop-menu-item" data-speed="0.5">0.5x</div>
                            </div>
                        </div>
                        <div class="volume-control">
                            <button id="muteBtn" class="b-button" title="静音"><i class="fas fa-volume-high"></i></button>
                            <div class="volume-slider-container">
                                <div class="volume-fill"></div>
                                <div class="volume-thumb"></div>
                            </div>
                        </div>
                        <button id="fullscreenBtn" class="b-button" title="全屏"><i class="fas fa-expand"></i></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 视频信息栏 -->
        <div class="video-info-bar">
            <div class="uploader-info">
                <div class="left">
                    <img th:src="${session.curVideo.user.iconUrl}" alt="UP主头像" class="avatar">
                    <div>
                        <div class="name" th:text="${session.curVideo.user.userName}">UP主名称</div>
                        <div class="fans" th:text="${session.curVideo.user.fanNum} + ' 粉丝'">粉丝数</div>
                    </div>
                </div>
                <button class="follow-btn" id="focuson">
                    <span class="focusClass"><i class="fas fa-plus"></i></span>
                    <span class="focusvalue">关注</span>
                </button>
            </div>

            <div class="video-meta">
                <span><i class="fas fa-play"></i> <span th:text="${session.curVideo.viewNum}">0</span></span>
                <span><i class="fas fa-clock"></i> <span th:text="${#dates.format(session.curVideo.editDate,'yyyy-MM-dd HH:mm')}">发布时间</span></span>
            </div>

            <div class="action-bar">
                <button class="action-button dianzan">
                    <i class="fas fa-thumbs-up"></i>
                    <span class="dianzanvalue">点赞</span>
                    <span id="ppNum" th:text="${session.curVideo.ppNum}">0</span>
                </button>
                <button class="action-button" data-toggle="modal" data-target="#commentModal">
                    <i class="fas fa-pencil-alt"></i>
                    <span>点评</span>
                </button>
                <button class="action-button" id="c_button">
                    <span class="c_class"><i class="far fa-star"></i></span>
                    <span class="c_value">收藏</span>
                </button>
                <button class="action-button" id="barrage_on_off">
                    <span class="barrage_icon"><i class="fas fa-eye"></i></span>
                    <span class="barrage_text">弹幕开</span>
                </button>
                <button class="action-button" data-toggle="modal" data-target="#privatemsg">
                    <i class="fas fa-comment"></i>
                    <span>私信</span>
                </button>
                <!-- 新增分享按钮 -->
                <button class="action-button" id="shareBtn" type="button">
                    <i class="fas fa-share"></i>
                    <span>分享</span>
                </button>
            </div>
        </div>

        <!-- 弹幕发送区域 -->
        <div class="barrage-container">
            <div class="barrage-input">
                <input type="text" class="barrage-txt" placeholder="发个弹幕见证当下">
                <button type="button" class="barrage-send">发送</button>
            </div>
        </div>

        <!-- 评论区 (这里可以后续通过AJAX动态加载) -->
        <div class="comments-section">
            <h2 class="comments-header">评论</h2>
            <div class="comment-publish-area" style="display: flex; gap: 12px; margin-bottom: 30px;">
                <img th:src="${session.user.iconUrl}" alt="用户头像" class="avatar" style="width: 40px; height: 40px; border-radius: 50%;">
                <div class="comment-input-container" style="flex: 1;">
                    <textarea id="comment-textarea" class="form-control" rows="2" placeholder="发一条友善的评论吧" style="resize: vertical;"></textarea>
                    <div style="text-align: right; margin-top: 10px;">
                        <button id="publish-comment-btn" class="btn btn-primary" style="background-color: var(--b-pink); border: none;">发表评论</button>
                    </div>
                </div>
            </div>
            <div id="comment-list">
                <!-- 初始为空，由JS填充 -->
            </div>

        </div>
    </main>

    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-card">
            <h3 style="margin-bottom: 16px;">视频信息</h3>
            <div style="margin-bottom: 16px;">
                <div style="margin-bottom: 8px;"><strong>描述：</strong></div>
                <div style="color: var(--b-text-secondary);" th:text="${session.curVideo.videoInfo}">视频描述</div>
            </div>
            <div style="margin-bottom: 8px;"><strong>类型：</strong> <span th:text="${session.curVideo.videoType.typeName}">视频类型</span></div>
            <div style="margin-bottom: 8px;"><strong>状态：</strong> <span th:text="${session.curVideo.videoState.stateName}">视频状态</span></div>
            <div style="margin-bottom: 8px;"><strong>即时评分：</strong> <span id="starNum" th:text="${session.curVideo.ppNum}">0</span></div>
        </div>

        <div class="sidebar-card">
            <h3 style="margin-bottom: 16px;">视频推荐</h3>
            <div class="related-videos-list" id="videoList">
                <!-- 动态加载相关视频 -->
            </div>
        </div>
    </aside>
</div>

<!-- 私信模态框 (来自老版本) -->
<div class="modal fade" id="privatemsg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">发送私信</h4>
            </div>
            <div class="modal-body">
                <form id="msgForm" class="form-horizontal" role="form">
                    <input type="hidden" name="receiveUserId" th:value="${session.curVideo.user.userId}">
                    <input type="hidden" name="msgTypeId" value="1">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">主题</label>
                        <div class="col-sm-10">
                            <input type="text" name="msgTitle" class="form-control" placeholder="输入主题">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">内容</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" name="msgContext" style="resize:none;" rows="5" placeholder="输入内容"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="sendMsg">发送</button>
            </div>
        </div>
    </div>
</div>

<!-- 点评模态框 (来自老版本) -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">视频点评</h4>
            </div>
            <div class="modal-body">
                <form id="commentedstarForm" method="post">
                    <div class="form-group">
                        <label>评分：</label>
                        <select class="form-control" name="starNum">
                            <option selected="selected">==请选择评星==</option>
                            <option value="1">★</option>
                            <option value="2">★★</option>
                            <option value="3">★★★</option>
                            <option value="4">★★★★</option>
                            <option value="5">★★★★★</option>
                        </select>
                    </div>
                    <input type="hidden" name="userId" id="userIdTwo" />
                    <input type="hidden" name="videoId" id="videoIdTwo"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="submitButton" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

<script>
    // 布局切换逻辑
    document.addEventListener('DOMContentLoaded', () => {
        const layoutBtns = document.querySelectorAll('.layout-btn');
        const normalContainer = document.getElementById('normalContainer');
        const douyinContainer = document.getElementById('douyinContainer');
        const douyinVideo = document.getElementById('douyinVideoPlayer');

        // 布局切换功能
        layoutBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const layout = btn.dataset.layout;

                // 更新按钮状态
                layoutBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');

                // 切换布局
                if (layout === 'douyin') {
                    normalContainer.classList.add('douyin-mode');
                    douyinContainer.classList.add('active');

                    // 抖音模式下自动播放视频
                    if (douyinVideo) {
                        douyinVideo.play().catch(e => console.log('自动播放失败:', e));
                    }

                    // 同步抖音模式下的点赞状态
                    syncDouyinActions();
                    // 切换到抖音时暂停经典视频
                    const normalVideo = document.getElementById('videoPlayer');
                    if (normalVideo) {
                        normalVideo.pause();
                    }
                } else {
                    normalContainer.classList.remove('douyin-mode');
                    douyinContainer.classList.remove('active');

                    // 暂停抖音视频
                    if (douyinVideo) {
                        douyinVideo.pause();
                    }
                    // 切换到经典时自动播放经典视频，并确保属性正确
                    const normalVideo = document.getElementById('videoPlayer');
                    if (normalVideo) {
                        // 重新设置src和muted，防止切换后丢失
                        const src = normalVideo.getAttribute('th:src') || normalVideo.getAttribute('src');
                        if (src) normalVideo.src = src;
                        normalVideo.muted = true;
                        normalVideo.play().catch(e => console.log('经典模式自动播放失败:', e));
                    }
                }
            });
        });

        // 同步抖音模式下的操作状态
        function syncDouyinActions() {
            // 同步点赞状态
            const normalLikeBtn = document.querySelector('.dianzan');
            const douyinLikeBtn = document.querySelector('#douyinContainer .dianzan');
            if (normalLikeBtn && douyinLikeBtn) {
                douyinLikeBtn.className = normalLikeBtn.className;
                douyinLikeBtn.querySelector('.dianzanvalue').textContent = normalLikeBtn.querySelector('.dianzanvalue').textContent;
                const normalPpNum = document.getElementById('ppNum');
                const douyinPpNum = document.getElementById('douyinPpNum');
                if (normalPpNum && douyinPpNum) {
                    douyinPpNum.textContent = normalPpNum.textContent;
                }
            }
            // 收藏状态
            const normalCollectBtn = document.getElementById('c_button');
            const douyinCollectBtn = document.getElementById('douyinCButton');
            if (normalCollectBtn && douyinCollectBtn) {
                douyinCollectBtn.className = normalCollectBtn.className;
                douyinCollectBtn.querySelector('.c_value').textContent = normalCollectBtn.querySelector('.c_value').textContent;
                douyinCollectBtn.querySelector('.c_class').innerHTML = normalCollectBtn.querySelector('.c_class').innerHTML;
            }
            // 关注状态
            const normalFocusBtn = document.getElementById('focuson');
            const douyinFocusBtn = document.getElementById('douyinFocusBtn');
            if (normalFocusBtn && douyinFocusBtn) {
                douyinFocusBtn.className = normalFocusBtn.className;
                douyinFocusBtn.querySelector('.focusvalue').textContent = normalFocusBtn.querySelector('.focusvalue').textContent;
                douyinFocusBtn.querySelector('.focusClass').innerHTML = normalFocusBtn.querySelector('.focusClass').innerHTML;
            }
            // 弹幕状态
            const normalBarrageBtn = document.getElementById('barrage_on_off');
            const douyinBarrageBtn = document.getElementById('douyinBarrageBtn');
            if (normalBarrageBtn && douyinBarrageBtn) {
                douyinBarrageBtn.className = normalBarrageBtn.className;
                douyinBarrageBtn.querySelector('.barrage_text').textContent = normalBarrageBtn.querySelector('.barrage_text').textContent;
                douyinBarrageBtn.querySelector('.barrage_icon').innerHTML = normalBarrageBtn.querySelector('.barrage_icon').innerHTML;
            }
            // 重新绑定抖音模式按钮事件
            bindDouyinActions();
        }

        // 绑定抖音模式下的按钮事件
        function bindDouyinActions() {
            // 先解绑，防止重复
            $('#douyinContainer .dianzan').off('click').on('click', function(e) {
                e.preventDefault();
                $('.dianzan').click();
            });
            $('#douyinCButton').off('click').on('click', function(e) {
                e.preventDefault();
                $('#c_button').click();
            });
            $('#douyinFocusBtn').off('click').on('click', function(e) {
                e.preventDefault();
                $('#focuson').click();
            });
            $('#douyinBarrageBtn').off('click').on('click', function(e) {
                e.preventDefault();
                $('#barrage_on_off').click();
            });
        }

        // 页面初始化时绑定一次
        document.addEventListener('DOMContentLoaded', function() {
            bindDouyinActions();
        });

        // 在所有会改变状态的地方调用syncDouyinActions()，如点赞、收藏、关注、弹幕切换后
        // 这些地方已在前面代码中setTimeout(syncDouyinActions, 100); 保证同步和事件绑定
    });

    // toast函数
    function showToast(message, type = 'success') {
        const toast = $(`<div class="my-toast my-toast-${type}">${message}</div>`);
        $("#toast-container").append(toast);
        setTimeout(() => { toast.fadeOut(400, () => toast.remove()); }, 2000);
    }
    // 删除确认弹窗
    function showConfirmModal(message, onConfirm, showCancel = false, isWarning = false) {
        console.log('[showConfirmModal 调试] 被调用，参数：', {message, onConfirm, showCancel, isWarning});
        const maskClass = isWarning ? 'my-modal-mask warning-modal-mask' : 'my-modal-mask';
        const modalClass = isWarning ? 'my-modal warning-modal' : 'my-modal';
        const modalHtml = `
        <div class="${maskClass}" style="outline: 3px solid #fb7299; outline-offset: -6px;">
            <div class="${modalClass}" style="outline: 3px solid #fb7299; outline-offset: -6px;">
                <div class="my-modal-title">${message}</div>
                <div class="my-modal-btns">
                    <button class="my-modal-btn my-modal-btn-confirm">确定</button>
                    ${showCancel ? '<button class="my-modal-btn my-modal-btn-cancel">取消</button>' : ''}
                </div>
            </div>
        </div>`;
        const $modal = $(modalHtml);
        $("#modal-container").append($modal);
        setTimeout(() => { $modal.css('box-shadow', '0 0 0 4px #fb7299'); }, 100);
        $modal.find('.my-modal-btn-confirm').on('click', function() {
            $modal.remove();
            if (onConfirm) onConfirm();
        });
        $modal.find('.my-modal-btn-cancel').on('click', function() {
            $modal.remove();
        });
        console.log('[showConfirmModal 调试] 弹窗已插入DOM，当前modal数量：', $(".my-modal").length);
    }

    // 原有的业务逻辑 (使用jQuery)
    $(function () {
        const videoId = $('#videoId').val();
        const userId = $('#userId').val();
        const focusedId = $('#focusedid').val();

        // =================================================================
        // ============== 全新的、完整的评论系统JS逻辑 ==============
        // =================================================================

        // 1. 加载主评论列表的函数
        function loadComments() {
            const commentList = $("#comment-list");
            commentList.empty(); // 先清空

            $.getJSON(`/api/comment/list/${videoId}`, function (comments) {
                if (comments && comments.length > 0) {
                    $.each(comments, function (_, comment) {
                        const commentHtml = renderComment(comment, true); // true表示是一级评论
                        commentList.append(commentHtml);
                    });
                } else {
                    commentList.html('<p style="color: #999; text-align: center;">还没有评论，快来抢沙发吧！</p>');
                }
            });
        }

        // 2. 加载单条评论的回复列表 (楼中楼)
        function loadReplies(parentId) {
            const replyList = $(`#reply-list-${parentId}`);
            replyList.empty();

            $.getJSON(`/api/comment/replies/${parentId}`, function(replies) {
                if (replies && replies.length > 0) {
                    $.each(replies, function(_, reply) {
                        const replyHtml = renderComment(reply, false); // false表示是回复
                        replyList.append(replyHtml);
                    });
                }
            });
        }

        // 3. 渲染单条评论/回复的HTML模板函数
        function renderComment(comment, isRoot) {
            // 兼容多种头像字段
            // const avatarUrl = comment.userIconUrl || comment.iconUrl || comment.avatar || '/static/images/default-avatar.png';
            const safeContent = $('<div/>').text(comment.content).html();
            let replyToHtml = '';
            if (comment.replyToUserName) {
                replyToHtml = ` <span style=\"color: #999;\">回复</span> <b style=\"color: var(--b-blue);\">@${comment.replyToUserName}</b>`;
            }
            const html = `
            <div class=\"comment-item\" id=\"comment-item-${comment.commentId}\">\n
                <div class=\"content\" style=\"flex: 1;\">\n
                    <div class=\"username\">${comment.userName || '匿名用户'} ${replyToHtml}</div>\n
                    <div class=\"text\">${safeContent}</div>\n
                    <div class=\"comment-meta\" style=\"color: #999; font-size: 12px; margin-top: 8px;\">\n
                        <span>${new Date(comment.createdAt).toLocaleString()}</span>\n
                        <div style=\"float: right;\">\n
                            <a href=\"javascript:void(0);\" class=\"comment-like-btn\" data-comment-id=\"${comment.commentId}\">\n                                <i class=\"far fa-thumbs-up\"></i> <span class=\"like-count\">${comment.likeCount || 0}</span>\n                            </a>\n                            <a href=\"javascript:void(0);\" class=\"comment-reply-btn\" style=\"margin-left: 15px;\">\n                                <i class=\"fas fa-reply\"></i> 回复\n                            </a>\n                            ${comment.userId == userId ? `\n                            <a href=\"javascript:void(0);\" class=\"comment-delete-btn\" data-comment-id=\"${comment.commentId}\" style=\"margin-left: 15px; color: #f44336;\">\n                                <i class=\"fas fa-trash\"></i> 删除\n                            </a>` : ''}\n                        </div>\n                    </div>\n                    <div class=\"reply-input-area\" style=\"display: none; margin-top: 10px; display: flex; gap: 10px;\">\n                        <input type=\"text\" class=\"form-control reply-input\" placeholder=\"回复 @${comment.userName || '匿名用户'}\">\n                        <button class=\"btn btn-sm btn-primary submit-reply-btn\" data-parent-id=\"${comment.commentId}\" data-root-id=\"${isRoot ? comment.commentId : comment.rootId}\">发送</button>\n                    </div>\n                    <div class=\"reply-list\" id=\"reply-list-${comment.commentId}\" style=\"margin-top: 15px; border-left: 2px solid #eee; padding-left: 15px;\"></div>\n                </div>\n            </div>\n        `;
            return html;
        }

        // 4. 事件绑定 - 发表一级评论
        $("#publish-comment-btn").on('click', function() {
            const content = $("#comment-textarea").val().trim();
            if (!content) {
                showToast("评论内容不能为空！", 'error');
                return;
            }
            $.ajax({
                url: '/api/comment/add', type: 'POST', contentType: 'application/json',
                data: JSON.stringify({ videoId: videoId, userId: userId, content: content, parentId: 0, rootId: 0 }),
                success: function() {
                    $("#comment-textarea").val('');
                    showToast("评论发表成功！", 'success');
                    loadComments();
                },
                error: () => showToast("评论失败，请稍后再试。", 'error')
            });
        });

        // 5. 事件委托 - 处理所有对评论的操作 (点赞、回复、删除)
        $("#comment-list").on('click', function(e) {
            const target = $(e.target);

            // 点击 "回复" 按钮
            if (target.closest('.comment-reply-btn').length) {
                target.closest('.content').find('.reply-input-area').slideToggle(200);
            }

            // 点击 "发送回复" 按钮
            if (target.hasClass('submit-reply-btn')) {
                const parentId = target.data('parent-id');
                const rootId = target.data('root-id');
                const content = target.siblings('.reply-input').val().trim();
                if (!content) return;

                $.ajax({
                    url: '/api/comment/add', type: 'POST', contentType: 'application/json',
                    data: JSON.stringify({ videoId: videoId, userId: userId, content: content, parentId: parentId, rootId: rootId }),
                    success: function() {
                        target.siblings('.reply-input').val('');
                        target.closest('.reply-input-area').slideUp(200);
                        loadReplies(parentId);
                    },
                    error: () => showToast("回复失败，请稍后再试。", 'error')
                });
            }

            // 点击 "点赞" 按钮
            if (target.closest('.comment-like-btn').length) {
                const likeBtn = target.closest('.comment-like-btn');
                const commentId = likeBtn.data('comment-id');

                // 假设用一个class来标记是否已点赞，这个信息应该从后端获取更准确
                const isLiked = likeBtn.hasClass('liked');
                const url = `/api/comment/like/${commentId}/${userId}`;

                $.ajax({
                    url: url,
                    type: isLiked ? 'DELETE' : 'POST',
                    success: function() {
                        const countSpan = likeBtn.find('.like-count');
                        const currentCount = parseInt(countSpan.text());
                        if (isLiked) {
                            likeBtn.removeClass('liked').css('color', '');
                            likeBtn.find('.fa-thumbs-up').removeClass('fas').addClass('far'); // 实心变空心
                            countSpan.text(currentCount - 1);
                        } else {
                            likeBtn.addClass('liked').css('color', 'var(--b-pink)');
                            likeBtn.find('.fa-thumbs-up').removeClass('far').addClass('fas'); // 空心变实心
                            countSpan.text(currentCount + 1);
                        }
                    }
                });
            }

            // 点击 "删除" 按钮
            if (target.closest('.comment-delete-btn').length) {
                const deleteBtn = target.closest('.comment-delete-btn');
                const commentId = deleteBtn.data('comment-id');
                showConfirmModal("确定要删除这条评论吗？", function() {
                    $.ajax({
                        url: `/api/comment/delete/${commentId}`,
                        type: 'DELETE',
                        success: function() {
                            $(`#comment-item-${commentId}`).fadeOut(400, function() { $(this).remove(); });
                            showToast("删除成功", 'success');
                        },
                        error: () => showToast("删除失败！", 'error')
                    });
                });
            }
        });

        // 初始加载一次评论
        loadComments();

        // 初始化抖音模式下的数据同步
        syncDouyinActions();

        // 弹幕开关同步切换弹幕输入框和弹幕层
        $("#barrage_on_off").on('click', function () {
            const barrageLayer = $(".barrage");
            const barrageInput = $(".barrage-container");
            barrageLayer.toggle();
            barrageInput.toggle();
            const icon = $(this).find('.barrage_icon i');
            const text = $(this).find('.barrage_text');
            if (barrageLayer.is(':visible')) {
                icon.removeClass('fa-eye-slash').addClass('fa-eye');
                text.text('弹幕开');
            } else {
                icon.removeClass('fa-eye').addClass('fa-eye-slash');
                text.text('弹幕关');
            }
            // 同步抖音模式下的弹幕状态
            setTimeout(syncDouyinActions, 100);
        });

        // WebSocket弹幕
        let ws;
        if (typeof (WebSocket) !== "undefined") {
            ws = new WebSocket(`ws://${window.location.host}/BarrageWebSocket?videoId=${videoId}`);
            ws.onopen = () => console.log("弹幕WebSocket连接已建立");
            ws.onmessage = (msg) => {
                const text = msg.data;
                const barrageDiv = $("<div></div>").text(text);
                const barrageContainer = $(".video-player-container .barrage .show");
                const containerHeight = barrageContainer.height();

                if(containerHeight > 30) {
                    barrageDiv.css({
                        top: Math.floor(Math.random() * (containerHeight - 30)),
                        right: -barrageDiv.width(),
                        color: 'white',
                        position: 'absolute',
                        fontSize: '22px',
                        textShadow: '1px 1px 2px black',
                        whiteSpace: 'nowrap'
                    }).appendTo(barrageContainer);

                    barrageDiv.animate({
                        right: barrageContainer.width() + 20
                    }, Math.random() * 8000 + 8000, 'linear', function() {
                        $(this).remove();
                    });
                }
            };
            ws.onclose = () => console.log("弹幕WebSocket连接已关闭");
            ws.onerror = () => console.error("弹幕WebSocket发生错误");
        }
        // 修复弹幕发送按钮
        $(".barrage-send").on('click', function () {
            const text = $(".barrage-txt").val();
            if (!text.trim()) return;
            // 先尝试message参数
            $.post(`/barrage/sendGroupMessage/${videoId}`, { message: text }, function() {
                $(".barrage-txt").val('');
                showToast("弹幕已发送", "success");
            }, "JSON").fail(function(xhr) {
                // 如果500，尝试msg参数
                $.post(`/barrage/sendGroupMessage/${videoId}`, { msg: text }, function() {
                    $(".barrage-txt").val('');
                    showToast("弹幕已发送", "success");
                }, "JSON").fail(function(xhr2) {
                    showToast("弹幕发送失败：" + (xhr2.responseJSON?.message || xhr2.statusText), "error");
                });
            });
            // WebSocket同步发送
            if (typeof ws !== "undefined" && ws.readyState === 1) {
                ws.send(text);
            }
        });

        // 视频推荐
        $.getJSON("/video/getRecommendVideo", function (data) {
            const videoList = $("#videoList");
            $.each(data, function (_, item) {
                const videoItem = $(`
                    <div class="related-video-item">
                        <img class="thumbnail" src="${item.thunmbnailUrl}" alt="视频缩略图">
                        <div class="details">
                            <div class="title">${item.videoTitle}</div>
                            <div class="views">${item.viewNum}次观看</div>
                        </div>
                    </div>
                `).click(() => window.open(`/video/videoPlay?videoId=${item.videoId}`));
                videoList.append(videoItem);
            });
        });

        // 点赞
        $('.dianzan').on('click', function() {
            $.post("/video/thumbsUp", { videoId: videoId }, function (data) {
                if (data.message === "点赞成功") {
                    const numElement = $('#ppNum');
                    numElement.text(parseInt(numElement.text()) + 1);
                    $('.dianzanvalue').text("已点赞");
                    $('.dianzan').off('click'); // 防止重复点击
                    showToast(data.message, 'success');
                    // 同步抖音模式下的点赞状态
                    setTimeout(syncDouyinActions, 100);
                    syncAllDouyinLikeCounts(); // 新增：同步所有抖音点赞数
                } else {
                    showToast(data.message, 'error');
                }
            }, "JSON");
        });

        // 关注
        $.post("/focus/focusVerify", { focusedId: focusedId }, function (data) {
            if (data.message === "已关注") {
                $('#focuson .focusClass').html('<i class="fas fa-check"></i>');
                $('#focuson .focusvalue').text("已关注");
                showToast("已关注", 'error');
                // 同步抖音模式下的关注状态
                setTimeout(syncDouyinActions, 100);
            } else {
                $('#focuson').on('click', function () {
                    $.post("/focus/focusOn", { focusedId: focusedId }, function(resp) {
                        if (resp.message === "关注成功") {
                            $('#focuson .focusClass').html('<i class="fas fa-check"></i>');
                            $('#focuson .focusvalue').text("已关注");
                            $('#focuson').off('click');
                            showToast("关注成功", 'success');
                            // 同步抖音模式下的关注状态
                            setTimeout(syncDouyinActions, 100);
                        } else {
                            showToast(resp.message, 'error');
                        }
                    }, "JSON");
                });
            }
        }, "JSON");

        // 收藏
        $.post("/collection/vertifyIfCollection", { videoId: videoId }, function (data) {
            if (data.message === "已收藏") {
                $('#c_button .c_class').html('<i class="fas fa-star"></i>');
                $('#c_button .c_value').text("已收藏");
                // 同步抖音模式下的收藏状态
                setTimeout(syncDouyinActions, 100);
            } else {
                $('#c_button').on('click', function () {
                    $.post("/collection/addCollection", { videoId: videoId }, function(resp) {
                        if (resp.message === "收藏成功") {
                            $('#c_button .c_class').html('<i class="fas fa-star"></i>');
                            $('#c_button .c_value').text("已收藏");
                            $('#c_button').off('click');
                            // 同步抖音模式下的收藏状态
                            setTimeout(syncDouyinActions, 100);
                        } else {
                            window.wxc.xcConfirm(resp.message, window.wxc.xcConfirm.typeEnum.warning);
                        }
                    }, "JSON");
                });
            }
        }, "JSON");

        // 私信
        $("#sendMsg").on('click', function () {
            $.post("/Message/addLetter", $('#msgForm').serialize(), function(result) {
                // 右上角toast提示
                showToast("已发送", "success");
                $('#privatemsg').modal('hide');
            }, "JSON").fail(() => window.wxc.xcConfirm("发送失败", window.wxc.xcConfirm.typeEnum.error));
        });

        // 点评
        $("#submitButton").on('click', function(){
            const formData = new FormData($("#commentedstarForm")[0]);
            formData.set("videoId", videoId); // 确保videoId正确
            formData.set("userId", userId);   // 确保userId正确

            $.ajax({
                type:"post", url:"/video/commented", data: formData,
                processData: false, contentType: false, dataType:"JSON",
                success: function(result){
                    if(result.message === "点评成功"){
                        window.wxc.xcConfirm(result.message, window.wxc.xcConfirm.typeEnum.success);
                        $('#commentModal').modal('hide');
                        window.hasCommented = true;
                    } else if(result.message === "不可重复提交" || result.message === "你已经参加点评" || result.message === "已点评"){
                        showToast("已点评", "error");
                        $('#commentModal').modal('hide');
                        $("#submitButton").prop('disabled', true);
                        window.hasCommented = true;
                    } else {
                        window.wxc.xcConfirm(result.message, window.wxc.xcConfirm.typeEnum.warning);
                    }
                }
            });
        });

        // 初始化点评模态框中的隐藏字段
        $('#commentModal').on('show.bs.modal', function () {
            $("#userIdTwo").val(userId);
            $("#videoIdTwo").val(videoId);
        });

        // 1. 新增全局变量标记是否已点评
        let hasCommented = false;

        // 3. 页面加载时通过接口判断是否已点评
        $(function(){
            const videoId = $('#videoId').val();
            const userId = $('#userId').val();
            $.get('/video/isCommented', {videoId: videoId, userId: userId}, function(res){
                if(res && res.commented){
                    hasCommented = true;
                }
            });
        });

        // 4. 拦截点评按钮点击事件
        $(document).on('click', '[data-toggle="modal"][data-target="#commentModal"], [data-target="#commentModal"]', function(e){
            if(hasCommented){
                showToast("已点评", "error");
                e.stopImmediatePropagation();
                e.preventDefault();
                return false;
            }
        });

    });
</script>
<script>
    // 在页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 1. 找到原有的视频推荐容器
        const originalVideoList = document.getElementById('videoList');
        if (!originalVideoList) return;

        // 2. 获取父容器（整个侧边栏卡片）
        const sidebarCard = originalVideoList.closest('.sidebar-card');
        if (!sidebarCard) return;

        // 3. 修改标题为"热门推荐"
        const title = sidebarCard.querySelector('h3');
        if (title) {
            title.innerHTML = `
            <i class="fas fa-fire" style="color: #fb7299; margin-right: 8px;"></i>
            热门推荐
            <span style="float: right; font-size: 13px; color: #999;">
                <i class="fas fa-sync-alt" style="cursor: pointer;" id="refreshHotVideos"></i>
            </span>
        `;
        }

        // 4. 使用主页中已有的视频数据
        const mainPageVideos = [
            {
                videoId: 1,
                videoTitle: "霸王别姬",
                thunmbnailUrl: "/static/vimages/video1.png", // 替换为实际缩略图URL
                viewNum: "125.8万",
                duration: "05:00",
                videoInfo: "段小楼（张丰毅）与程蝶衣（张国荣）是一对打小一起长大的师兄弟...",
                videoURL: "/src/main/resources/static/video/bwbj.mp4"
            },
            {
                videoId: 4,
                videoTitle: "你好，李焕英",
                thunmbnailUrl: "/static/vimages/video4.png", // 替换为实际缩略图URL
                viewNum: "89.3万",
                duration: "05:00",
                videoInfo: "2001年的某一天，刚刚考上大学的贾晓玲（贾玲 饰）经历了人生中的一次大起大落..."
            },
            {
                videoId: 6,
                videoTitle: "少年的你",
                thunmbnailUrl: "/static/vimages/video6.png", // 替换为实际缩略图URL
                viewNum: "76.5万",
                duration: "05:00",
                videoInfo: "陈念（周冬雨 饰）是一名即将参加高考的高三学生，同校女生胡晓蝶（张艺凡 饰）..."
            },
            {
                videoId: 5,
                videoTitle: "大话西游之大圣娶亲",
                thunmbnailUrl: "/static/vimages/video5.png", // 替换为实际缩略图URL
                viewNum: "62.1万",
                duration: "05:00",
                videoInfo: "至尊宝（周星驰 饰）被月光宝盒带回到五百年前，遇见紫霞仙子（朱茵 饰）..."
            }
        ];

        // 5. 渲染热门视频函数
        function renderHotVideos(videos) {
            originalVideoList.innerHTML = '';

            videos.forEach(item => {
                const videoItem = document.createElement('div');
                videoItem.className = 'related-video-item';
                videoItem.innerHTML = `
                <div style="position: relative;">
                    <img class="thumbnail" src="${item.thunmbnailUrl}" alt="视频缩略图" loading="lazy">
                    <span style="position: absolute; bottom: 5px; right: 5px; background: rgba(0,0,0,0.7); color: white; padding: 2px 5px; border-radius: 4px; font-size: 12px;">
                        ${item.duration}
                    </span>
                </div>
                <div class="details">
                    <div class="title">${item.videoTitle}</div>
                    <div class="views">
                        <i class="fas fa-play" style="color: #999; font-size: 12px;"></i>
                        ${item.viewNum}
                    </div>
                </div>
            `;
                videoItem.addEventListener('click', () => {
                    // 使用与主页相同的跳转方式
                    window.location.href = `/video/videoPlay?videoId=${item.videoId}`;
                });
                originalVideoList.appendChild(videoItem);
            });
        }

        // 6. 初始加载（使用主页视频数据）
        setTimeout(() => {
            renderHotVideos(mainPageVideos);
        }, 500); // 模拟网络延迟

        // 7. 刷新按钮功能
        document.getElementById('refreshHotVideos')?.addEventListener('click', function() {
            originalVideoList.innerHTML = '<div style="text-align: center; padding: 20px;"><i class="fas fa-spinner fa-spin"></i> 加载中...</div>';

            // 模拟刷新数据（随机排序）
            setTimeout(() => {
                const shuffled = [...mainPageVideos].sort(() => 0.5 - Math.random());
                renderHotVideos(shuffled);

                // 添加刷新成功提示
                const toast = document.createElement('div');
                toast.innerHTML = '<div style="position: fixed; top: 20px; right: 20px; background: rgba(0,0,0,0.8); color: white; padding: 10px 20px; border-radius: 4px; z-index: 9999;">推荐视频已更新</div>';
                document.body.appendChild(toast);
                setTimeout(() => toast.remove(), 2000);
            }, 600);
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const douyinContainer = document.getElementById('douyinContainer');
        const videoItems = douyinContainer.querySelectorAll('.douyin-video-item');
        const videos = douyinContainer.querySelectorAll('video');

        function getCurrentVisibleIndex() {
            // 计算哪个video-item在视口中间
            let minDiff = Infinity, currentIndex = 0;
            videoItems.forEach((item, idx) => {
                const rect = item.getBoundingClientRect();
                const diff = Math.abs(rect.top + rect.height/2 - window.innerHeight/2);
                if (diff < minDiff) {
                    minDiff = diff;
                    currentIndex = idx;
                }
            });
            return currentIndex;
        }

        function playCurrentPauseOthers() {
            const idx = getCurrentVisibleIndex();
            videos.forEach((video, i) => {
                if (i === idx) {
                    video.play().catch(()=>{});
                } else {
                    video.pause();
                }
            });
        }

        // 只在抖音模式下生效
        douyinContainer.addEventListener('scroll', function() {
            playCurrentPauseOthers();
        });

        // 切换到抖音模式时也要触发一次
        document.querySelectorAll('.layout-btn[data-layout="douyin"]').forEach(btn => {
            btn.addEventListener('click', function() {
                setTimeout(playCurrentPauseOthers, 300);
            });
        });

        // 初始也触发一次
        setTimeout(playCurrentPauseOthers, 500);
    });
</script>
<script>
    // 事件委托：抖音模式下所有视频的功能按钮（支持所有视频项）
    $('#douyinContainer').on('click', '.douyin-video-item .douyin-action-btn', function(e) {
        const $btn = $(this);
        // 点赞按钮（已由主逻辑处理，不重复）
        if ($btn.hasClass('dianzan')) return;

        // 点评按钮
        if ($btn.find('.fa-star').length) {
            e.preventDefault();
            // 触发主界面的点评按钮
            $('[data-toggle="modal"][data-target="#commentModal"]').first().click();
            return;
        }
        // 收藏按钮
        if ($btn.hasClass('dianzan') === false && $btn.find('.fa-bookmark').length) {
            e.preventDefault();
            $('#c_button').click();
            return;
        }
        // 弹幕按钮
        if ($btn.find('.fa-comment-dots').length) {
            e.preventDefault();
            $('#barrage_on_off').click();
            return;
        }
        // 私信按钮
        if ($btn.find('.fa-envelope').length) {
            e.preventDefault();
            $('[data-toggle="modal"][data-target="#privatemsg"]').first().click();
            return;
        }
    });

    // 抖音播放器：点击视频区域暂停/播放，并显示/隐藏暂停标志
    $('#douyinContainer').on('click', '.douyin-video-player', function(e) {
        if (e.target !== this) return;
        const $video = $(this);
        const $item = $video.closest('.douyin-video-item');
        const $pauseIcon = $item.find('.douyin-pause-icon');
        if (this.paused) {
            this.play();
            $pauseIcon.fadeOut(150);
        } else {
            this.pause();
            $pauseIcon.fadeIn(150);
        }
    });
    // 自动隐藏暂停标志（如通过其他方式恢复播放）
    $('#douyinContainer .douyin-video-player').each(function(){
        this.addEventListener('play', function(){
            const $item = $(this).closest('.douyin-video-item');
            $item.find('.douyin-pause-icon').fadeOut(150);
        });
        this.addEventListener('pause', function(){
            const $item = $(this).closest('.douyin-video-item');
            $item.find('.douyin-pause-icon').fadeIn(150);
        });
    });
</script>
<script>
    // 原播放器：点击视频区域暂停/播放，并显示/隐藏暂停标志
    $(document).on('click', '#videoPlayer', function(e) {
        if (e.target !== this) return;
        const $pauseIcon = $(this).siblings('.main-pause-icon');
        if (this.paused) {
            this.play();
            $pauseIcon.fadeOut(150);
        } else {
            this.pause();
            $pauseIcon.fadeIn(150);
        }
    });
    // 自动隐藏主播放器暂停标志（如通过其他方式恢复播放）
    document.getElementById('videoPlayer').addEventListener('play', function(){
        $(this).siblings('.main-pause-icon').fadeOut(150);
    });
    document.getElementById('videoPlayer').addEventListener('pause', function(){
        $(this).siblings('.main-pause-icon').fadeIn(150);
    });
</script>

<script>
// ... existing code ...
// 分享按钮复制链接功能
function copyToClipboard(text) {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(function() {
            showShareToast('链接已复制');
        }, function() {
            fallbackCopyTextToClipboard(text);
        });
    } else {
        fallbackCopyTextToClipboard(text);
    }
}
function fallbackCopyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
        var successful = document.execCommand('copy');
        showShareToast('链接已复制');
    } catch (err) {
        showShareToast('复制失败');
    }
    document.body.removeChild(textArea);
}
function showShareToast(msg) {
    let toast = document.createElement('div');
    toast.className = 'my-toast my-toast-success';
    toast.innerText = msg;
    document.body.appendChild(toast);
    setTimeout(() => { toast.remove(); }, 1800);
}
document.addEventListener('DOMContentLoaded', function() {
    var shareBtn = document.getElementById('shareBtn');
    if (shareBtn) {
        shareBtn.addEventListener('click', function() {
            copyToClipboard(window.location.href);
        });
    }
});
// ... existing code ...
</script>

</body>
</html>